<template>
  <el-row type="flex" justify="center" align="middle" class="success" v-if="state">
    <edu-image :src="require('@/assets/images/public/success.png')"></edu-image>
    <div class="font">
      {{ text }}
    </div>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      type: this.$route.query.state,
      code: this.$route.query.code,
      uniid: '',
      text: '',
      state: false
    }
  },
  created() {
    this.handleUniid()
  },
  computed: {
    userInfo() {
      return this.$store.getters['user/accountInfo']
    }
  },
  methods: {
    // 绑定
    handleBind() {
      this.$api.createConfigThirdloginBind(
        {
          type: this.type,
          oauth: this.uniid
        },
        res => {
          this.text = res.msg
          this.handlepath()
        },
        error => {
          this.$message.error(error.msg)
          this.handlepath()
        }
      )
    },
    handleUniid() {
      this.$api.getConfigThirdloginCheck(
        {
          type: this.type,
          code: this.code
        },
        res => {
          let data = res.data
          if (data.has_bind == 1) {
            this.state = false
            this.handlepath()
            if (this.userInfo.id === data.user.id) {
              this.$message.success('绑定成功')
            } else {
              this.$message.error('此账号已绑定其他用户')
            }
          } else {
            this.state = true
            this.uniid = data.oauth
            this.handleBind()
          }
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    // 跳转回去
    handlepath() {
      let _this = this
      var t
      clearTimeout(t)
      t = setTimeout(function() {
        _this.$router.push({
          path: '/my/profile/thirdlogin'
        })
      }, 3000)
    }
  }
}
</script>

<style lang="scss" scoped>
.success {
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  .font {
    font-size: 18px;
    font-weight: 400;
    color: #303133;
    line-height: 25px;
    margin-top: 40px;
  }
}
</style>
